<template>
  <view class="user-review">
    <!-- 商品信息 - 包含图片 -->
    <view class="product-info">
      <image :src="productImage" class="product-image" mode="aspectFill"></image>
      <view class="product-text">
        <text class="product-name">{{ productName }}</text>
        <text class="product-spec">{{ productSpec }}</text>
      </view>
    </view>

    <!-- 评分组件 - 调整样式匹配图片 -->
    <view class="rating-section">
      <text class="rating-label">评分</text>
      <text class="rating-stars">★★★★</text>
      <text class="rating-text">{{ ratingText }}</text>
    </view>

    <!-- 时间戳 -->
    <view class="timestamp">
      {{ currentTime }}
    </view>

    <!-- 文本内容 - 已填写的内容 -->
    <view class="review-content">
      {{ reviewContent }}
    </view>

    <!-- 文本输入框 - 保留用于编辑 -->
    <view class="review-textarea" v-if="isEditing">
      <u--input
        placeholder="填写高质量的评价，可参与抽奖机会"
        v-model="reviewText"
        border="surround"
        type="textarea"
        maxlength="45"
        autoHeight
        :clearable="false"
      ></u--input>
      <text class="char-count">{{ reviewText.length }}/45</text>
    </view>

    <!-- 图片上传 - 保留用于编辑 -->
    <view class="upload-section" v-if="isEditing">
      <text class="upload-label">上传图片</text>
      <u-upload
        :fileList="fileList"
        @afterRead="onRead"
        @delete="onDelete"
        uploadText="上传图片"
        :maxCount="6"
        name="upload1"
      ></u-upload>
    </view>

    <!-- 提交按钮 - 保留用于编辑 -->
    <view class="submit-section" v-if="isEditing">
      <u-button
        type="primary"
        text="提交"
        @click="handleSubmit"
        class="submit-button"
        color="#FF9500"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productImage: '/static/swy/p10.jpg',
      productName: '商品名称',
      productSpec: '商品属性规格',
      rating: 4, // 评分值（1-5）
      ratingText: '非常满意',
      currentTime: this.formatTime(new Date()),
      reviewContent: '挺好的，酸酸甜甜的味道不错。',
      reviewText: '',
      fileList: [],
      isEditing: false // 控制是否显示编辑区域
    };
  },
  methods: {
    formatTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    onRead(file) {
      const fileList = file.file;
      if (fileList.length) {
        const newFiles = fileList.map(f => ({
          url: f.path || f.url,
          name: f.name || 'image.jpg'
        }));
        this.fileList = [...this.fileList, ...newFiles];
      } else {
        this.fileList.push({
          url: fileList.path || fileList.url,
          name: fileList.name || 'image.jpg'
        });
      }
    },
    onDelete(file) {
      this.fileList = this.fileList.filter(f => f.url !== file.url);
    },
    handleSubmit() {
      uni.showToast({
        title: '评价提交成功！',
        icon: 'success'
      });
      this.isEditing = false;
    }
  }
};
</script>

<style scoped>
.user-review {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.product-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
}

.product-text {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 4px;
}

.product-spec {
  font-size: 14px;
  color: #666;
}

.rating-section {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rating-label {
  font-size: 14px;
  color: #333;
  margin-right: 8px;
}

.rating-stars {
  color: #FF9900;
  font-size: 16px;
  letter-spacing: 1px;
}

.rating-text {
  margin-left: 8px;
  font-size: 14px;
  color: #FF9900;
}

.timestamp {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.review-textarea {
  position: relative;
  margin: 20px 0;
}

.char-count {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 12px;
  color: #999;
  z-index: 1;
}

.upload-section {
  margin-bottom: 30px;
}

.upload-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}

.submit-section {
  text-align: right;
  padding: 0 10px;
}

.submit-button {
  width: 120px;
  height: 40px;
}
</style>